<template>
    <div class="emailSend-container" style="padding:0 100px">
        <el-col :span="20">
        <el-form ref="form" :model="form" label-width="200px">
            <el-form-item :label="$t('alarmpush.alarmSend.emailSend')" class="marginbottom_10">
                <el-switch
                    v-model="form.ownSendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.ownSendFlag==1" prop="email" :rules="[{ required: form.ownSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.email" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('alarmpush.alarmSend.daySend')" class="marginbottom_10">
                <el-switch
                    v-model="form.daySendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.daySendFlag==1" prop="dayEmail" :rules="[{ required: form.daySendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.dayEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('alarmpush.alarmSend.weekSend')" class="marginbottom_10">
                <el-switch
                    v-model="form.weekSendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.weekSendFlag==1" prop="weekEmail" :rules="[{ required: form.weekSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.weekEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('offline.reminder')" class="marginbottom_10" :error='offLineError' > 
                <div class="search-box">
                    <div class="search-box-sub">
                        <el-switch
                            v-model="form.offLineSendFlag"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ccc">
                        </el-switch>
                    </div>
                    <div class="search-box-sub" v-if='form.offLineSendFlag == 1'>
                        <span>{{$t('Effective.time.period')}}</span>
                        <el-time-select
                        :placeholder="$t('index.startTime')"
                        v-model="offLineStartTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '24:00',
                        maxTime: offLineEndTime
                        }"
                        style="width:130px;"
                        
                        >
                        </el-time-select>
                        -
                        <el-time-select
                            :placeholder="$t('index.endTime')"
                            v-model="offLineEndTime"
                            :picker-options="{
                            start: '00:00',
                            step: '00:30',
                            end: '24:00',
                            minTime: offLineStartTime
                            }"
                            style="width:130px;"
                            >
                        </el-time-select>
                    </div>
                    <div class="search-box-sub" v-if='form.offLineSendFlag == 1'>
                        <span>{{$t('Offline.time.email')}} </span>
                        <el-select v-model="form.offLineHour" filterable :placeholder="$t('pleaseSelect')" >
                            <el-option
                                v-for="item in hourList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
            <el-form-item v-if="form.offLineSendFlag==1" prop="offLineEmail" :rules="[{ required: form.offLineSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.offLineEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('power.generation.reminder')" class="marginbottom_10" :error='zpError'>
                
                <div class="search-box">
                    <div class="search-box-sub">
                        <el-switch
                            v-model="form.zpSendFlag"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ccc">
                        </el-switch>
                    </div>
                    <div class="search-box-sub" v-if='form.zpSendFlag == 1'>
                        <span>{{$t('Effective.time.period')}} </span>
                        <el-time-select
                        :placeholder="$t('index.startTime')"
                        v-model="zpStartTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '24:00',
                        maxTime: zpLineEndTime
                        }"
                        style="width:130px;"
                        >
                        </el-time-select>
                        -
                        <el-time-select
                            :placeholder="$t('index.endTime')"
                            v-model="zpLineEndTime"
                            :picker-options="{
                            start: '00:00',
                            step: '00:30',
                            end: '24:00',
                            minTime: zpStartTime
                            }"
                            style="width:130px;"
                            >
                        </el-time-select>
                    </div>
                    <div class="search-box-sub" v-if='form.zpSendFlag == 1'>
                        <span>{{$t('Zero.power.generation.time')}} </span>
                        <el-select v-model="form.zpHour" filterable :placeholder="$t('pleaseSelect')" >
                            <el-option
                                v-for="item in hourList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>

            </el-form-item>
            <el-form-item v-if="form.zpSendFlag==1" prop="zpEmail" :rules="[{ required: form.zpSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.zpEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="save('form')" class="pull-right">{{$t('save')}}</el-button>
        </el-col>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        this.test_email=(rule, value, callback) => {
            let email_reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6})(;([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6}))*$/;
            if(value!=''&&!email_reg.test(value)){
                callback(new Error(this.$t('login.js_sign_email_error')));
            }else{
                callback()
            }
        }
        return {
            form:{
                ownSendFlag: '',
                email: '',
                daySendFlag: '',
                dayEmail: '',
                weekSendFlag: '',
                weekEmail: '',
                offLineSendFlag: '',
                offLineEmail:'',
                offLinePeriod:'',
                offLineHour:2,
                zpSendFlag:'',
                zpEmail:'',
                zpPeriod:'',
                zpHour:2,
            },
            offLineStartTime:'',
            offLineEndTime:'',
            zpStartTime:'',
            zpLineEndTime:'',
            test_email:{},
            hourList:[{
                id:1,
                text:'1h'
            },{
                id:2,
                text:'2h'
            },{
                id:6,
                text:'6h'
            },{
                id:12,
                text:'12h'
            },{
                id:24,
                text:'24h'
            }],
            offLineError:'',
            zpError:'',
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getAlarmSend()
    },
    methods: {
        async getAlarmSend(){
            let res = await this.API.getAlarmSend({})
            if(res){
                for(let key in this.form){
                    this.form[key]=res[key]
                }
            }
            if(res.offLinePeriod){
                this.offLineStartTime = res.offLinePeriod.split('-')[0]
                this.offLineEndTime = res.offLinePeriod.split('-')[1]
            }
            if(res.zpPeriod){
                this.zpStartTime = res.zpPeriod.split('-')[0]
                this.zpLineEndTime = res.zpPeriod.split('-')[1]
            }
        },
        save(formName){
            if(this.form.offLineSendFlag == 1){
                if(!this.offLineStartTime){
                    this.offLineError = this.$t('index.startTime') + this.$t('index_js_notNull')
                    return
                }
                if(!this.offLineEndTime){
                    this.offLineError = this.$t('index.endTime') + this.$t('index_js_notNull')
                    return
                }
                if(!this.form.offLineHour){
                    this.offLineError = this.$t('Offline.time.email') + this.$t('index_js_notNull')
                    return
                }
            }
            if(this.form.zpSendFlag == 1){
                if(!this.zpStartTime){
                    this.zpError = this.$t('index.startTime') + this.$t('index_js_notNull')
                    return
                }
                if(!this.zpLineEndTime){
                    this.zpError = this.$t('index.endTime') + this.$t('index_js_notNull')
                    return
                }
                if(!this.form.zpHour){
                    this.zpError = this.$t('Zero.power.generation.time') + this.$t('index_js_notNull')
                    return
                }
            }
            this.$refs[formName].validate(async (valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            if(this.form.offLineSendFlag == 1){
                this.form.offLinePeriod = this.offLineStartTime + '-' + this.offLineEndTime
            }
            if(this.form.zpSendFlag == 1){
                this.form.zpPeriod = this.zpStartTime + '-' + this.zpLineEndTime
            }
            let res = await this.API.updateAlarmSend(this.form)
            if(res == '0'){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
        }
    },
};
</script>

<style lang="less" scoped>
.flex-box-email-big{
    display: flex;
    justify-content: space-between;
    .flex-box-email{
        display: flex;
        justify-content: space-between;
        flex: 3;
    }
}
.search-box .search-box-sub{
    height: 30px;
}
</style>
